<template>
	<view class="app-icon" @click="handleClick">
		<view class="icon-container" :style="containerStyle">
			<!-- 字体图标 -->
			<text v-if="type === 'iconfont'" class="iconfont" :class="name" :style="iconStyle"></text>
			<!-- 图片 -->
			<image v-else-if="type === 'image'" :src="name" :mode="imageMode || 'aspectFit'" class="icon-image"
				:style="iconStyle"></image>
			<!-- 文本 -->
			<text v-else :style="iconStyle">{{ name }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'AppIcon',
	props: {
		// 图标名称/类名/图片路径
		name: {
			type: String,
			default: ''
		},
		// 图标类型：iconfont（字体图标）、image（图片）、text（文本）
		type: {
			type: String,
			default: 'iconfont'
		},
		// 图片模式（仅当type为image时有效）
		imageMode: {
			type: String,
			default: ''
		},
		// 图标大小
		size: {
			type: String,
			default: '24'
		},
		// 图标颜色
		color: {
			type: String,
			default: ''
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			default: ''
		},
		// 背景内边距
		padding: {
			type: String,
			default: '40'
		},
		// 边框半径
		borderRadius: {
			type: String,
			default: '20'
		},
		// 是否可点击
		clickable: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		// 容器样式（背景相关）
		containerStyle() {
			const style = {};
			if (this.backgroundColor) {
				style.backgroundColor = this.backgroundColor;
				const size = parseFloat(this.size.replace('rpx', ''));
				if (size > 0) {
					const padding = parseFloat(this.padding.replace('rpx', ''));
					style.width = `${size + padding}rpx`;
					style.height = `${size + padding}rpx`;
				}
			}
			if (this.borderRadius) {
				style.borderRadius = `${this.borderRadius}`;
			}
			
			return style;
		},
		// 图标样式（图标本身）
		iconStyle() {
			const style = {};
			if (this.size) {
				// 对于图片类型，同时设置宽高
				if (this.type === 'image') {
					style.width = `${this.size}rpx`;
					style.height = `${this.size}rpx`;
				} else {
					style.fontSize = `${this.size}rpx`;
				}
			}
			if (this.color) {
				style.color = this.color;
			}
			return style;
		}
	},
	methods: {
		handleClick() {
			if (this.clickable) {
				this.$emit('click');
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.app-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&.clickable {
		cursor: pointer;
		transition: opacity 0.2s ease;

		&:active {
			opacity: 0.7;
		}
	}

	.icon-container {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: box-shadow 0.2s ease;
	}

	.icon-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

// 字体图标默认样式
.iconfont {
	font-family: 'iconfont';
	// 可以在这里添加默认的字体图标样式
}

// 常用图标尺寸类
.icon-xs {
	font-size: 20rpx !important;
	width: 20rpx;
	height: 20rpx;
}

.icon-sm {
	font-size: 24rpx !important;
	width: 24rpx;
	height: 24rpx;
}

.icon-md {
	font-size: 28rpx !important;
	width: 28rpx;
	height: 28rpx;
}

.icon-lg {
	font-size: 32rpx !important;
	width: 32rpx;
	height: 32rpx;
}

.icon-xl {
	font-size: 36rpx !important;
	width: 36rpx;
	height: 36rpx;
}

.icon-2x {
	font-size: 40rpx !important;
	width: 40rpx;
	height: 40rpx;
}

// 常用颜色类
.icon-primary {
	color: #007AFF !important;
}

.icon-success {
	color: #4CD964 !important;
}

.icon-warning {
	color: #FF9500 !important;
}

.icon-error {
	color: #FF3B30 !important;
}

.icon-info {
	color: #5AC8FA !important;
}

.icon-muted {
	color: #8E8E93 !important;
}
</style>